<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="description" content="jQuery-图片的放大镜显示效果" />
<meta name="description" content="张鑫旭web前端学习之css，jQuery学习实例页面" />
<meta name="keywords" content="张鑫旭,鑫空间-鑫生活,博客,web前端,css,jQuery,特效,图片放大镜效果,js插件,demo页面,学习," />
<meta name="author" content="张鑫旭,zhangxixnu" />
<title>jQuery-图片的放大镜显示效果</title>
<link rel="shortcut icon" href="http://www.zhangxinxu.com/zxx_ico.png" />
<link rel="stylesheet" href="http://www.zhangxinxu.com/study/css/common.css" type="text/css" />
<style type="text/css">
img{max-width:none;}
.zxx_image_zoom_list{display:inline-block; width:2.0em; height:1.1em; text-align:center; font-size:128px;}
.zxx_image_zoom_list img.zxx_zoom_image{padding:3px; border:1px solid #cccccc; background:white; vertical-align:middle; position:relative;}
.zxx_image_zoom_list:hover,.zxx_image_zoom_list:hover img.zxx_zoom_image{border-color:#ff3300;}
.zxx_image_zoom_div{width:200px; height:200px; padding:3px; background:white; border:1px solid #cccccc; text-align:center; position:absolute; z-index:1000; left:0; top:0; overflow:hidden;}
</style>
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript" src="jqzoom.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("img.zxx_zoom_image").jqueryzoom();
	});
</script>
</head>

<body>
	<div class="zxx_out_box">
    	<div class="zxx_in_box">
        	<div class="zxx_header">
                <a href="http://www.zhangxinxu.com/">
               		<img class="l" src="http://www.zhangxinxu.com/wordpress/wp-content/themes/default/images/index_logo.gif" />
                </a>
                <span class="zxx_author_time">by zhangxinxu 2009-08-30 20:03</span>
            </div>
            <h3 class="zxx_title">jQuery-图片的放大镜显示效果</h3>
            <div class="zxx_main_con">
            	<a href="http://image.zhangxinxu.com/image/study/s/s512/mm1.jpg" class="zxx_image_zoom_list">
                    <img class="zxx_zoom_image" src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" />
                </a>
                <a href="http://image.zhangxinxu.com/image/study/s/s512/mm2.jpg" class="zxx_image_zoom_list">
                    <img class="zxx_zoom_image" src="http://image.zhangxinxu.com/image/study/s/s128/mm2.jpg" />
                </a>
                <a href="http://image.zhangxinxu.com/image/study/s/s512/mm3.jpg" class="zxx_image_zoom_list">
                    <img class="zxx_zoom_image" src="http://image.zhangxinxu.com/image/study/s/s128/mm3.jpg" />
                </a>
                <a href="http://image.zhangxinxu.com/image/study/s/s512/mm4.jpg" class="zxx_image_zoom_list">
                    <img class="zxx_zoom_image" src="http://image.zhangxinxu.com/image/study/s/s128/mm4.jpg" />
                </a>
                <a href="http://image.zhangxinxu.com/image/study/s/s512/mm5.jpg" class="zxx_image_zoom_list">
                    <img class="zxx_zoom_image" src="http://image.zhangxinxu.com/image/study/s/s128/mm5.jpg" />
                </a>
                <a href="http://image.zhangxinxu.com/image/study/s/s512/mm6.jpg" class="zxx_image_zoom_list">
                    <img class="zxx_zoom_image" src="http://image.zhangxinxu.com/image/study/s/s128/mm6.jpg" />
                </a>
            </div>
            <div class="mt20 mb20">
				原作者<a href="http://www.mind-projects.it/" target="_blank">Doc. Ing. Renzi Marco</a>，此示例页面样式由张鑫旭编写，同时对原JavaScript做了修改，原来alt指向大图地址修改为a标签的href指向。
			</div>
            <div class="zxx_footer">
            	&copy;<a href="http://www.zhangxinxu.com/">张鑫旭-鑫空间-鑫生活</a>
                |
                <a href="http://www.zhangxinxu.com/wordpress/?p=80">该篇相关文章</a>
            </div>
        </div>
    </div>
</body>
</html>
